<template>
  <view class="city-explore-page">
    <!-- 1. 顶部轮播图(swiper) -->
    <view class="elliptical-box">
		<text class="progress-title">泉州风光</text>
      <swiper class="top-swiper" :autoplay="true" :interval="3000">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image class="swiper-img" :src="item" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 城市介绍(rich-text) - 泉州介绍，重要部分红色 -->
    <view class="elliptical-box">
      <rich-text class="city-intro" :nodes="cityIntroNodes"></rich-text>
    </view>

    <!-- 3. 探索进度(progress) -->
    <view class="elliptical-box">
      <view class="progress-wrapper">
        <text class="progress-title">探索进度</text>
        <text class="current-progress">当前进度: {{ explorePercent }}%</text>
        <view class="progress-container">
          <progress 
            class="custom-progress" 
            :percent="explorePercent" 
            activeColor="#2388FF" 
            backgroundColor="#E5E5E5"
          ></progress>
          <text class="progress-percent">{{ explorePercent }}%</text>
        </view>
      </view>
    </view>

    <!-- 4. 城市选择(picker) -->
    <view class="elliptical-box">
		<text class="progress-title">选择城市</text>
      <picker class="city-picker" mode="selector" :range="cityRange" @change="onCityChange">
        <view class="picker-text">选择城市：{{ selectedCity }}</view>
      </picker>
    </view>

    <!-- 新增：泉州宣传(视频 + 音频) -->
    <view class="elliptical-box">
      <text class="progress-title">泉州宣传</text>
      <video :src="videoSrc" controls poster="/static/vedio-poster.jpg" class="city-video"></video>
      <view class="audio-group">
        <text>泉州背景音乐</text>
        <button class="audio-play-btn" @click="playAudio">播放</button>
        <text class="audio-desc">泉州南音 · 泉州传统乐园</text>
      </view>
    </view>

    <!-- 5. 偏好设置(radio + switch + slider) -->
    <view class="elliptical-box">
		<text class="progress-title">偏好设置</text>
      <view class="preference-box">
        <!-- radio -->
        <view class="radio-group">
          <radio-group @change="onTravelModeChange">
            <label class="radio-label" v-for="(mode, idx) in travelModes" :key="idx">
              <radio :value="mode" :checked="selectedTravelMode === mode"></radio>
              {{ mode }}
            </label>
          </radio-group>
        </view>
        <!-- switch -->
        <view class="switch-group">
          <switch :checked="showRecommendScenic" @change="onShowRecommendChange"></switch>
          <text>显示推荐景点</text>
        </view>
        <!-- 优化后的 slider 进度条 -->
        <view class="slider-container">
          <view class="slider-info">
            <text>探索半径：</text>
            <text class="radius-value">{{ exploreRadius }}km</text>
          </view>
          <slider
            class="custom-slider"
            :value="exploreRadius"
            @change="onExploreRadiusChange"
            :min="1"
            :max="50"
            :step="1"
            activeColor="#4CD964"
            backgroundColor="#E0E0E0"
            block-size="20"
          ></slider>
          <view class="slider-range">
            <text>1km</text>
            <text>50km</text>
          </view>
        </view>
      </view>
    </view>

    
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据（可替换为泉州相关图片）
      swiperList: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg',
		'/static/city4.jpg',
		'/static/city5.jpg'
      ],
      // 泉州介绍富文本节点（添加了泉州介绍标题，重要部分红色）
      cityIntroNodes: [
        {
          name: 'p',
          attrs: { style: 'font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #333;' },
          children: [{ type: 'text', text: '泉州介绍' }]
        },
        {
          name: 'p',
          attrs: { style: 'font-size: 17px; font-weight: bold; margin-bottom: 10px; ' },
          children: [{ type: 'text', text: '海上丝绸之路起点 - 泉州' }]
        },
        {
          name: 'p',
          attrs: { style: 'margin-bottom: 10px;' },
          children: [
            { type: 'text', text: '历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“' },
            { type: 'text', text: '海上丝绸之路'},
            { type: 'text', text: '”起点，宋元时期被誉为“' },
            { type: 'text', text: '东方第一大港'},
            { type: 'text', text: '”。' }
          ]
        },
        {
          name: 'p',
          attrs: { style: 'margin-bottom: 10px;' },
          children: [
            { type: 'text', text: '著名景点：' },
            { type: 'text', text: '清源山、开元寺、泉州清净寺、崇武古城、洛阳桥'},
            { type: 'text', text: '等。' }
          ]
        },
        {
          name: 'p',
          attrs: { style: 'margin-bottom: 10px;color: red;' },
          children: [
            { type: 'text', text: '特色文化：拥有' },
            { type: 'text', text: '南音、木偶戏、闽南建筑'},
            { type: 'text', text: '等丰富的非物质文化遗产。' }
          ]
        }
      ],
      // 探索进度百分比
      explorePercent: 60,
      // 城市选择相关（泉州相关区域）
      cityRange: ['福建省-泉州市-丰泽区', '福建省-泉州市-鲤城区', '福建省-泉州市-洛江区'],
      selectedCity: '请选择城市',
      // 偏好设置相关
      travelModes: ['公交', '自驾', '步行'],
      selectedTravelMode: '公交',
      showRecommendScenic: true,
      exploreRadius: 10,
      // 泉州相关视频地址（可替换为实际视频）
      videoSrc: "/static/city-video.mp4",
      // 新增：音频上下文（用于播放音频）
      audioContext: null
    };
  },
  methods: {
    // 城市选择变化
    onCityChange(e) {
      const selectedIndex = e.detail.value;
      this.selectedCity = this.cityRange[selectedIndex];
    },
    // 出行方式变化
    onTravelModeChange(e) {
      this.selectedTravelMode = e.detail.value;
    },
    // 显示推荐景点开关变化
    onShowRecommendChange(e) {
      this.showRecommendScenic = e.detail.value;
    },
    // 探索半径变化
    onExploreRadiusChange(e) {
      this.exploreRadius = e.detail.value;
    },
    // 新增：播放音频方法
    playAudio() {
      // 如果音频上下文未创建，创建它
      if (!this.audioContext) {
        this.audioContext = uni.createInnerAudioContext();
        // 设置音频资源地址（需替换为实际泉州背景音乐地址）
        this.audioContext.src = 'https://example.com/quanzhou_music.mp3';
      }
      // 播放音频
      this.audioContext.play();
    }
  }
};
</script>

<style scoped>
.city-explore-page {
  padding: 15px;
  background-color: #f5f5f5;
}

/* 椭圆形盒子样式 - 核心样式 */
.elliptical-box {
  border-radius: 30px; 
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 15px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
  overflow: hidden; 
}

.top-swiper {
  height: 200px;
}
.swiper-img {
  width: 100%;
  height: 100%;
  border-radius: 15px; 
}
.city-intro {
  line-height: 1.6;
}

/* 探索进度样式调整 */
.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progress-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
.current-progress {
  font-size: 14px;
  color: #666;
}
.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-progress {
  flex: 1;
  height: 8px; 
}
.progress-percent {
  font-size: 14px;
  color: #333;
}

/* 城市选择器样式 */
.city-picker {
  padding: 12px 0;
  width: 100%;
}
.picker-text {
  color: #333;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preference-box {
  margin-bottom: 0;
}
.radio-group, .switch-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.radio-label {
  margin-right: 15px;
}

/* 优化的 slider 样式 */
.slider-container {
  margin-top: 15px;
}
.slider-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}
.radius-value {
  font-weight: bold;
  color: #007aff;
  margin-left: 5px;
}
.custom-slider {
  width: 100%;
}
.slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.city-video {
  width: 100%;
  height: 200px;
  border-radius: 15px; 
}

/* 新增：泉州宣传相关样式 */
.audio-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}
.audio-play-btn {
  background-color: #2388FF;
  color: #fff;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
}
.audio-desc {
  font-size: 12px;
  color: #999;
}
</style>
